import React, { useEffect, useState } from "react";
import * as echarts from "echarts";

const Relation: React.FC<any> = ({ RelationData }) => {
  let [Relation_chart] = useState<echarts.ECharts>();

  //   useEffect(()=>{
  //     console.log(RelationData);

  //       },[RelationData])
  useEffect(() => {
    Relation_chart = echarts.init(
      document.getElementById("Relation_chart") as HTMLElement
    );

    // 构建option配置对象
    const options = {
      xAxis: {
        show: false,
        type: "value",
      },
      yAxis: {
        show: false,
        type: "value",
      },
      series: [
        {
          type: "graph",
          layout: "none",
          coordinateSystem: "cartesian2d",
          symbolSize: 75,
          z: 3,
          label: {
            show: true,
            position: "bottom",
            color: "#5E5E5E",
            fontSize: 10, // 移动到此处
          },
          edgeLabel: {
            show: true,
            color: "#fff",
            fontSize: 10, // 移动到此处
            formatter: function (params: any) {
              return params.data.speed;
            },
          },
          edgeSymbol: ["none", "arrow"],
          edgeSymbolSize: 8,
          data: RelationData.relations.map(
            (item: {
              id: number;
              name: string;
              speed: number;
              value: Array<number>;
            }) => {
              if (item.id === 0) {
                return {
                  name: item.name,
                  category: 0,
                  active: true,
                  speed: `${item.speed}kb/s`,
                  value: item.value,
                };
              } else {
                return {
                  name: item.name,
                  value: item.value,
                  symbolSize: 30,
                  itemStyle: {
                    color: {
                      colorStops: [
                        { offset: 0, color: "#157EFF" },
                        { offset: 1, color: "#35C2FF" },
                      ],
                    },
                  },
                  label: {
                    fontSize: "10", // 移动到此处，并去掉外层的 `normal`
                  },
                };
              }
            }
          ),
          links: RelationData.relations.map(
            (item: { source: string; target: string; speed: number }) => ({
              source: item.source,
              target: item.target,
              speed: `${item.speed}kb/s`,
              lineStyle: {
                color: "#12b5d0",
                curveness: 0.2,
              },
              label: {
                show: true,
                position: "middle",
                offset: [10, 0],
                color: "#fff", // 添加颜色属性
                fontSize: 10, // 添加字体大小属性
              },
            })
          ),
        },
        {
          type: "lines",
          coordinateSystem: "cartesian2d",
          z: 1,
          effect: {
            show: true,
            smooth: false,
            trailLength: 0,
            symbol: "arrow",
            color: "rgba(55,155,255,0.6)",
            symbolSize: 12,
          },
          lineStyle: {
            curveness: 0.2,
          },
          data: [
            {
              coords: [
                [0, 300],
                [50, 200],
              ],
            },
            {
              coords: [
                [0, 100],
                [50, 200],
              ],
            },
            {
              coords: [
                [50, 200],
                [100, 100],
              ],
            },
            {
              coords: [
                [50, 200],
                [100, 300],
              ],
            },
          ],
        },
      ],
    };

    Relation_chart.setOption(options);
  }, [RelationData]);

  return (
    <div className="w-full h-full">
      <div>【数据传递信息】</div>
      <div id="Relation_chart" className="w-full h-full"></div>
    </div>
  );
};
export default Relation;
